<template>
	<view class="view-login">
		<view class="top-bg u-flex u-flex-xy-center">
			<text class="title">MDC-Demo</text>
		</view>
		<view class="form-box">
			<div class="form-item">
				<u--input placeholderClass="inp-holder" color="#fff" :clearable="true" placeholder="请输入账号" border="surround" v-model="account">
				</u--input>
			</div>
			<div class="form-item">
				<u--input placeholderClass="inp-holder" color="#fff" :clearable="true" type="password" placeholder="请输入密码" border="surround" v-model="password">
				</u--input>
			</div>
			<div class="form-item">
				<u-button text="登录" type="primary" @click="submit"></u-button>
			</div>
		</view>
		<view class="foot">
			<view class="foot-item">当前版本：{{ gVersion }}</view>
			<view class="foot-item" >
				<text v-if="!gApiUrl">还没有进行服务器配置，请进行</text>
				<text v-else>服务器已配置，修改请点击</text>
				<text class="link" @click="toSet">配置</text></view>
		</view>
	</view>
</template>

<script>
	import {login} from '@/mock/user'
	export default {
		data() {
			return {
				account: null,
				password: null
			}
		},
		onLoad() {

		},
		methods: {
			// 登录
			submit() {
				const form = {
					account: this.account,
					password: this.password,
				}
				// console.log(form)
				// 模拟请求
				let res = login(form)
				if(res) {
					uni.$u.toast('登录成功')
					uni.$u.vuex('gUser', res)
					setTimeout(() => {
						uni.reLaunch({
							url: '/pages/index/index'
						})
					}, 400)
				} else {
					uni.$u.toast('用户名或密码错误')
				}
				
				
			},
			toSet() {
				uni.navigateTo({
					url: './setting/setting'
				})
			}
		}
	}
</script>

<style lang="scss">
	.view-login {
		color: #fff;

		.top-bg {
			width: 100%;
			height: 400rpx;
			background-image: url(../../static/icon/login_bg.png);
			background-size: cover;
			font-size: 40rpx;
		}

		.form-box {
			width: 530rpx;
			margin: 60rpx auto;

			.form-item {
				margin-bottom: 30rpx;
				input {
					color: #fff;
				}
			}
		}

		.foot {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			padding-bottom: 40rpx;
			text-align: center;
			font-size: 26rpx;
			color: $u-tips-color;

			.foot-item {
				margin-top: 10rpx;
			}
		}
	}
</style>
